<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>二进制奶茶</title>
</head>

<body>

<h1>二进制奶茶</h1>
<h2>下单</h2>
<div>
    <form action="#" th:action="@{/order}" th:object="${newOrderForm}" method="post">
        <p>
            <label>折扣</label>
            <label>
                <input type="number" th:field="*{discount}" th:value="*{discount}"/>
            </label>
        </p>
        <p>
        <p th:if="${#fields.hasErrors('discount')}" th:errors="*{discount}" style="color:red">折扣错误</p>
        <label>饮料</label>
        <ul>
            <li th:each="item : ${items}">
                <label>
                    <input type="checkbox" th:field="*{itemIdList}" th:value="${item.id}"/>
                </label>
                <label th:text="${item.name}">Java咖啡</label>
                <label th:text="${item.size}">MEDIUM</label>
                <label th:text="${item.price}">CNY 12.00</label>
            </li>
        </ul>
        </p>
        <p th:if="${#fields.hasErrors('itemIdList')}" th:errors="*{itemIdList}" style="color:red">点单错误</p>
        <p>
            <input type="submit" value="提交"/>
        </p>
    </form>
</div>

<h2>订单</h2>
<div>
    <table border="1px">
        <thead>
        <tr>
            <th>订单编号</th>
            <th>总价</th>
            <th>实付</th>
            <th>状态</th>
            <th>内容</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="order : ${orders}">
            <td th:text="${order.id}">1</td>
            <td th:text="${order.amount.totalAmount}">CNY 12.0</td>
            <td th:text="${order.amount.payAmount}">CNY 12.0</td>
            <td th:text="${order.status}">ORDERED</td>
            <td>
                <div th:each="item : ${order.items}">
                    <label th:text="${item.name}">Java咖啡</label>-<label th:text="${item.size}">MEDIUM</label><br/>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>